import {useState} from "react";
import style from './index.module.scss'
import {PlusOutlined, ThunderboltOutlined, BulbOutlined, QuestionCircleOutlined} from '@ant-design/icons';
import {Form, Button, Alert, Radio, Tooltip} from 'antd';
import ACEditor from '@/components/ACEditor'

function TaskIndex() {
  const [loading, setLoading] = useState(false)
  const [showHost, setShowHost] = useState(false)
  const [showTemplate, setShowTemplate] = useState(false)
  const [interpreter, setInterpreter] = useState('sh')
  const [command, setCommand] = useState('')

  function handleSubmit() {

  }

  return (
    <div>
      <div className={style.index}>
        <Form layout="vertical" className={style.left}>
          <Form.Item required label="目标主机">
            <Button icon={<PlusOutlined/>} onClick={() => setShowHost(true)}>
              添加目标主机
            </Button>
          </Form.Item>

          <Form.Item required label="执行命令" style={{position: 'relative'}}>
            <Radio.Group
              buttonStyle="solid"
              style={{marginBottom: 12}}
              value={interpreter}
              onChange={e => setInterpreter(e.target.value)}>
              <Radio.Button value="sh" style={{width: 80, textAlign: 'center'}}>Shell</Radio.Button>
              <Radio.Button value="python" style={{width: 80, textAlign: 'center'}}>Python</Radio.Button>
            </Radio.Group>
            <a href="https://spug.cc/docs/batch-exec" target="_blank" rel="noopener noreferrer"
               className={style.tips}><BulbOutlined/> 使用全局变量？</a>
            <Button style={{float: 'right'}} icon={<PlusOutlined/>} onClick={() => setShowTemplate(true)}>
              从执行模版中选择
            </Button>

            {/*<ACEditor className={style.editor} mode={interpreter} value={command} width="100%" onChange={setCommand}/>*/}
          </Form.Item>
          <Button loading={loading} icon={<ThunderboltOutlined/>} type="primary" onClick={() => handleSubmit()}>
            开始执行
          </Button>
        </Form>
        <div className={style.right}>
          <div className={style.title}>
            执行记录
            <Tooltip title="多次相同的执行记录将会合并展示，每天自动清理，保留最近50条记录。">
              <QuestionCircleOutlined style={{color: '#999', marginLeft: 8}}/>
            </Tooltip>
          </div>
          <div className={style.inner}>

          </div>
        </div>
      </div>
    </div>
  )
}

export default TaskIndex
